<template>
  <div class="card-carousel-wrapper" :style="{width: width + 'px'}">
    <div class="card-carousel--nav__left" @click="moveCarousel(-1)" :disabled="atHeadOfList">
      <svg-icon icon-class="about" />
    </div>
    <div class="card-carousel" :style="{width: width + 'px'}">
      <div class="card-carousel--overflow-container">
        <div class="card-carousel-cards" :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}">
          <div class="card-carousel--card" v-for="(item, index) in items" :key="index">
            <img :height="imgHeight" :src="item.url">
          </div>
        </div>
      </div>
    </div>
    <div class="card-carousel--nav__right" @click="moveCarousel(1)" :disabled="atEndOfList">
      <svg-icon icon-class="about" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rotation',
  props: {
    width: {
      type: Number,
      default: 296
    },
    rollWidth: {
      type: Number,
      default: 200
    },
    imgData: {
      type: Array,
      default: () => {
        return []
      }
    },
    imgHeight: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      currentOffset: 0,
      items: [],
      imgTotalWidth: 10000
    }
  },
  mounted() {
    this.items = this.imgData
  },
  computed: {
    atEndOfList() {
      console.log(this.imgTotalWidth)
      return this.currentOffset <= -this.imgTotalWidth
    },
    atHeadOfList() {
      return this.currentOffset === 0
    }
  },
  watch: {
    imgData: {
      handler(data) {
        if (data && data.length > 0) {
          if (data[0].width) {
            this.imgTotalWidth = data.reduce((total, item) => {
              const scale = item.height / this.imgHeight
              return total + item.width / scale
            }, 0)
          } else {
            const promiseArr = data.map(item => {
              return this.getImg(item.url)
            })
            Promise.all(promiseArr).then(result => {
              this.imgTotalWidth = result.reduce((total, item) => {
                const scale = item.height / this.imgHeight
                return total + item.width / scale
              }, 0)
            })
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    moveCarousel(direction) {
      if (direction === 1 && !this.atEndOfList) {
        this.currentOffset -= this.rollWidth
      } else if (direction === -1 && !this.atHeadOfList) {
        this.currentOffset += this.rollWidth
      }
    },
    getImg(imageSrc) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.src = imageSrc
        img.onload = () => {
          resolve({ width: img.width, height: img.height, url: imageSrc })
        }
        img.onerror = () => {
          reject()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.card-carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 40px;
  color: #666a73;
  position: relative;

  .card-carousel--nav__left, .card-carousel--nav__right {
    display: inline-block;
    width: 55px;
    height: 100px;
    font-size: 15px;
    background: linear-gradient(90deg, rgba(121, 121, 121, 0) 0%, #444444 100%);
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 150ms linear;

    &[disabled] {
      display: none;
    }
  }

  .card-carousel--nav__left {
    transform: rotate(180deg);
    &:active {
      transform: rotate(180deg) scale(0.9);
    }
  }

  .card-carousel--nav__right {
    transform: rotate(0deg);

    &:active {
      transform: rotate(0deg) scale(0.9);
    }
  }

  .card-carousel {
    display: flex;
    justify-content: center;

    .card-carousel--overflow-container {
      overflow: hidden;

      .card-carousel-cards {
        display: flex;
        transition: transform 150ms ease-out;
        transform: translatex(0px);

        .card-carousel--card {
          margin: 0 10px 2px;
          cursor: pointer;
          box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
          background-color: #fff;
          border-radius: 4px;
          z-index: 3;

          &:first-child {
            margin-left: 0;
          }
          &:last-child {
            margin-right: 0;
          }

          & img {
            vertical-align: bottom;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            transition: opacity 150ms linear;
            user-select: none;

            &:hover {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
}

</style>
